<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery发送AJAX</title>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        let btns = $('button');
        //第一个按钮
        btns.eq(0).click(function(){
            //发送 AJAX 请求
            $.get('http://127.0.0.1/jquery-server', {wd:'牛年大吉', id:2021}, function(data){
                console.log(data);
            },'json');
        });

        btns.eq(1).click(function(){
            //发送 AJAX 请求
            $.post('http://127.0.0.1/jquery-server', {wd:'牛年大吉', id:2021}, function(data){
                console.log(data);
            },'json');
        });

        //通用型的发送请求的方法
        btns.eq(2).click(function(){
            //ajax 是对象中的一个方法
            $.ajax({
                //请求的类型
                type:'GET',
                //请求的url
                url: 'http://127.0.0.1/jquery-server',
                //请求的参数
                data: {
                    id:100,
                    keyword: 'abc'
                },
                //请求头
                headers: {
                    a: 100,
                    b: 200
                },
                //响应体类型设置
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时设置
                timeout: 2000,
            })
        });

    </script>
</body>
</html>